<template>
	<view>
		<view class="card u-p-b-30">
			<view class="title">
				<text>{{info.status_info || ''}}</text>
			</view>
			<block v-if="info.status>=3">
				<view class="cell">
					<view class="cell-left">
						<text>快递物流：</text>
					</view>
					<view class="cell-right">
						<text>{{info.fahuo_info.company}}</text>
					</view>
				</view>
				<view class="cell">
					<view class="cell-left">
						<text>快递单号：</text>
					</view>
					<view class="cell-right" style="width: 360rpx;">
						<text>{{info.fahuo_info.order_id}}</text>
					</view>
					<view class="cell-copy">
						<image src="../static/shop/ico_copy.png" mode=""></image>
					</view>
				</view>
			</block>
			<view class="cell">
				<view class="cell-left">
					<text>订单编号：</text>
				</view>
				<view class="cell-right">
					<text>{{info.order_id || ''}}</text>
				</view>
			</view>
			<view class="cell">
				<view class="cell-left">
					<text>下单时间：</text>
				</view>
				<view class="cell-right">
					<text>{{info.dtTime || ''}}</text>
				</view>
			</view>
		</view>
		
		<view class="card u-m-t-20">
			<view class="address-font1">
				<text>{{info.shouhuo_info.name}}</text>
				<text class="u-m-l-20">{{info.shouhuo_info.phone}}</text>
			</view>
			<view class="address-font2">
				<text>{{info.shouhuo_info.address}}</text>
			</view>
		</view>
		
		<view class="card u-m-t-20">
			<view class="goods-title">
				<text>商品信息</text>
			</view>
			<view class="goods" v-for="(item,index) in info.products" :key="index">
				<view class="goods-image">
					<image :src="item.image" mode="aspectFill"></image>
				</view>
				<view class="goods-content">
					<view class="goods-name u-line-1">
						<text>{{item.title}}</text>
					</view>
					<view class="goods-spec">
						<text>{{item.key_vals == '无'?'':item.key_vals}}</text>
					</view>
					<view class="goods-bottom">
						<view class="goods-num">
							<text>x{{item.num}}</text>
						</view>
						<view class="">
							<text class="goods-price">{{item.price_sale}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="card-bottom">
				<view class="card-bottom-left">
					<text>费用明细</text>
				</view>
				<view class="card-bottom-right">
					<view class="card-bottom-font1" v-if="info.pay_info.jifen">积分支付：{{info.pay_info.jifen}}</view>
					<view class="card-bottom-font1" v-if="info.pay_info.weixin">微信支付：￥{{info.pay_info.weixin}}</view>
					<view class="card-bottom-font2">
						<text>合计</text>
						<text class="card-bottom-price">{{info.status == -5 ? info.price_need_pay : info.price}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="card u-m-t-20" v-if="info.remark">
			<view class="goods-title">
				<text>备注</text>
			</view>
			<view class="remark">
				<text>{{info.remark}}</text>
			</view>
		</view>
		
		<view class="m-bottom-empty safe-area-inset-bottom">
			
		</view>
		<view class="m-bottom safe-area-inset-bottom" v-show="info.status == -5 || info.status == 3">
			<view class="m-bottom-btn" v-if="info.status == -5" @click="payFun">
				<text>支付</text>
			</view>
			<view class="m-bottom-btn" v-if="info.status == 3" @click="confirmFun">
				<text>确认收货</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				info:{shouhuo_info:{},products:[],pay_info:{}}
			}
		},
		onLoad(opt) {
			this.id = opt.id || ''
			this.getDetailFun()
		},
		methods: {
			getDetailFun(){
				this.$http.getJson('orders_detail',{id:this.id}).then(res=>{
					if(res.code == 1){
						this.info = res.data 
					}else{
						this.$m.msg(res.message,()=>{
							this.to_back()
						})
					}
				})
			},
			payFun(){
				this.$http.getPayParams({order_id:this.id}).then(res_pay=>{
					if(res_pay.code != 1){
						this.$m.msg(res_pay.message);
						return false;
					}
					this.$http.wx_pay(res_pay.data).then(result=>{
						if (result.errMsg == 'requestPayment:fail cancel' || result.errMsg == 'requestPayment:fail') {
							//用户取消支付
							this.$m.msg("支付取消");
							return false;
						}else{
							this.$m.msg("支付成功");
							this.getDetailFun()
						}
					})
				})
				
			},
			confirmFun(){
				uni.showModal({
					title:'确定到货了吗',
					success:(res)=> {
						console.log(res);
						if(res.confirm){
							this.$http.getJson('orders_qrshouhuo',{orderId:this.id}).then(response=>{
								if(response.code == 1){
									this.getDetailFun()
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background: #F6F6F6;
}
.card{
	background: #fff;
	padding: 0 25rpx;
	.title{
		font-size: 28rpx;
		color: #34302D;
		font-weight: 600;
		padding: 32rpx 0 20rpx 0;
	}
	.cell{
		display: flex;
		font-size: 24rpx;
		color: #34302D;
		line-height: 40rpx;
		.cell-right{
			color: #75706A;
		}
		.cell-copy{
			image{
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
	
	.address-font1{
		font-size: 28rpx;
		color: #34302D;
		padding-top: 24rpx;
		line-height: 40rpx;
	}
	.address-font2{
		font-size: 24rpx;
		color: #75706A;
		line-height: 33rpx;
		padding: 10rpx 0 24rpx;
	}
	
	.goods-title{
		display: flex;
		align-items: center;
		height: 100rpx;
		color: #462E1A;
		font-size: 28rpx;
		border-bottom: 1px solid #E6E3DE;
	}
	
	.goods{
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1px solid #E6E3DE;
		.goods-image{
			width: 140rpx;
			height: 140rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.goods-content{
			width: 540rpx;
			margin-left: 20rpx;
			.goods-name{
				font-size: 28rpx;
				color: #34302D;
				line-height: 40rpx;
				font-weight: 800;
				margin-top: 4rpx;
			}
			.goods-spec{
				font-size: 24rpx;
				color: #9A958F;
				margin-top: 8rpx;
				height: 33rpx;
				line-height: 33rpx;
			}
			.goods-bottom{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.goods-num{
					font-size: 24rpx;
					color: #9A958F;
				}
				.goods-price{
					font-size: 40rpx;
					color: #DE2C38;
					&::after{
						content: '积分';
						font-size: 24rpx;
						color: #76706B;
						margin-left: 5rpx;
					}
				}
			}
		}
	}
	
	.card-bottom{
		display: flex;
		justify-content: space-between;
		padding: 32rpx 0;
		.card-bottom-left{
			font-size: 28rpx;
			color: #462E1A;
		}
		.card-bottom-right{
			.card-bottom-font1{
				font-size: 26rpx;
				color: #76706B;
				line-height: 40rpx;
				text-align: right;
			}
			.card-bottom-font2{
				font-size: 28rpx;
				color: #33302D;
				text-align: right;
			}
			.card-bottom-price{
				font-size: 40rpx;
				color: #DE2C38;
				margin-top: 20rpx;
				margin-left: 10rpx;
				&::after{
					content: '积分';
					font-size: 24rpx;
					color: #76706B;
					margin-left: 5rpx;
				}
			}
		}
	}
	
	.remark{
		font-size: 28rpx;
		color: #75706A;
		line-height: 40rpx;
		padding: 30rpx 0;
	}
}

.m-bottom-empty{
	width: 100%;
	height: 200rpx;
	box-sizing: content-box;
}
.m-bottom{
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 100;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 750rpx;
	height: 120rpx;
	background: #FFFFFF;
	box-shadow: 0rpx -4rpx 10rpx 1rpx rgba(0,0,0,0.06);
	box-sizing: content-box;
	.m-bottom-btn{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 702rpx;
		height: 104rpx;
		background: #D3A358;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-size: 32rpx;
		color: #fff;
	}
}
</style>
